import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { Button, Col, Form, Input, Row, Select, DatePicker } from 'antd';
import { getMessage, TextWidget } from '@inbiz/react';
import EformMemberSelect from '@components/form/grade/EformMemberSelect/preview/web';
import { observer } from '@formily/react';
const RangePicker: any = DatePicker.RangePicker;
const AdvancedSearchForm = observer((props: any) => {
  const { setQueryParams, expand, setExpand,setState } = props;
  const [form] = Form.useForm();
  //查询和重置
  const onQuery = () => {
    form.validateFields().then((res: any) => {
      let result = res;
      if (result.startTime) {
        let startTime1 = result.startTime[0]
          ? result.startTime[0].format('yyyy-MM-DD')
          : '';
        let startTime2 = result.startTime[1]
          ? result.startTime[1].format('yyyy-MM-DD')
          : '';
        result.startTime = startTime1 + '$' + startTime2;
      }
      if (result.endTime) {
        let endTime1 = result.endTime[0]
          ? result.endTime[0].format('yyyy-MM-DD')
          : '';
        let endTime2 = result.endTime[1]
          ? result.endTime[1].format('yyyy-MM-DD')
          : '';
        result.endTime = endTime1 + '$' + endTime2;
      }
      if (result?.starter) {
        result['starter'] = result.starter
          ?.map((item: any) => item?.id)
          ?.join(',');
      }
      setQueryParams(result);
    });
  };

  EformMemberSelect.defaultProps = {
    // 请选择
    placeholder: getMessage('ProcessMonitoring.plzSelect'),
  };
  const onchange = (value:any) => {
    setState(value)
  };

  return (
    <>
      <Form
        colon={false}
        form={form}
        name="advanced_search"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
        labelAlign="right"
        initialValues={{
          state: '0',
        }}
      >
        <Row
          gutter={24}
          style={{
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          {props.queryCondition?.includes('流程编号') && (
            <Col
              span={8}
              style={{
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
              }}
            >
              <Form.Item
                name={`processInstanceId`}
                label={<div className='noWrap' title={getMessage('ProcessMonitoring.processNo')}>{getMessage('ProcessMonitoring.processNo')}</div>}
              >
                <Input
                  placeholder={getMessage('ProcessMonitoring.pleaseEnter')}
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
          )}

          {props.queryCondition?.includes('发起人') && (
            <Col
              span={8}
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Form.Item
                name={`starter`}
                label={<div className='noWrap' title={getMessage('ProcessMonitoring.sponsor')}>{getMessage('ProcessMonitoring.sponsor')}</div>}
              >
                <EformMemberSelect multiple={false} tabs={['user']} />
              </Form.Item>
            </Col>
          )}

          {!expand && (
            <>
              {props.queryCondition?.includes('流程名称') && (
                <Col
                  span={8}
                  style={{
                    display: 'flex',
                    flexDirection: 'row-reverse',
                    alignItems: 'center',
                  }}
                >
                  <Form.Item
                    name={`processName`}
                    label={<div className='noWrap' title={getMessage('ProcessMonitoring.processName')}>{getMessage('ProcessMonitoring.processName')}</div>}
                  >
                    <Input
                      placeholder={getMessage('ProcessMonitoring.pleaseEnter')}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
              )}

              {props.queryCondition?.includes('流程分组') && (
                <Col
                  span={8}
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}
                >
                  <Form.Item
                    name={`processGroupName`}
                    label={<div className='noWrap' title={getMessage('ProcessMonitoring.processGroup')}>{getMessage('ProcessMonitoring.processGroup')}</div>}
                  >
                    <Input
                      placeholder={getMessage('ProcessMonitoring.pleaseEnter')}
                      style={{ width: '100%' }}
                    />
                  </Form.Item>
                </Col>
              )}

              {props.queryCondition?.includes('流程状态') && (
                <Col
                  span={8}
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                >
                  <Form.Item
                    name={`state`}
                    label={<div className='noWrap' title={getMessage('ProcessMonitoring.processStatus')}>{getMessage('ProcessMonitoring.processStatus')}</div>}
                  >
                    <Select
                      onChange={onchange}
                      showSearch
                      style={{ width: '100%' }}
                      placeholder={getMessage('ProcessMonitoring.pleaseEnter')}
                      optionFilterProp="children"
                      filterOption={(input, option) =>
                        (option?.label ?? '').includes(input)
                      }
                      filterSort={(optionA, optionB) =>
                        (optionA?.label ?? '')
                          .toLowerCase()
                          .localeCompare((optionB?.label ?? '').toLowerCase())
                      }
                      options={[
                        {
                          value: '0',
                          label: getMessage('ProcessMonitoring.underApproval'), //审批中
                        },
                        {
                          value: '1',
                          label: getMessage(
                            'ProcessMonitoring.approvalCompleted',
                          ), //审批完成
                        },
                        {
                          value: '2',
                          label: getMessage('ProcessMonitoring.termination'), //终止
                        },
                      ]}
                    ></Select>
                  </Form.Item>
                </Col>
              )}

              {props.queryCondition?.includes('发起时间') && (
                <Col
                  span={8}
                  style={{
                    display: 'flex',
                    flexDirection: 'row-reverse',
                    alignItems: 'center',
                  }}
                >
                  <Form.Item
                    name={`startTime`}
                    label={<div className='noWrap' title={getMessage('ProcessMonitoring.originatingTime')}>{getMessage('ProcessMonitoring.originatingTime')}</div>}
                  >
                    <RangePicker
                      placeholder={[
                        getMessage('ProcessMonitoring.pleaseSelectADate'),
                        getMessage('ProcessMonitoring.pleaseSelectADate'),
                      ]}
                      style={{ width: '100%' }}
                      allowEmpty={[true, true]}
                    />
                  </Form.Item>
                </Col>
              )}

              {props.queryCondition?.includes('完成时间') && (
                <Col
                  span={8}
                  style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                  }}
                >
                  <Form.Item
                    name={`endTime`}
                    label={<div className='noWrap' title={getMessage('ProcessMonitoring.completionTime')}>{getMessage('ProcessMonitoring.completionTime')}</div>}
                  >
                    <RangePicker
                      placeholder={[
                        getMessage('ProcessMonitoring.pleaseSelectADate'),
                        getMessage('ProcessMonitoring.pleaseSelectADate'),
                      ]}
                      style={{ width: '100%' }}
                      allowEmpty={[true, true]}
                    />
                  </Form.Item>
                </Col>
              )}
            </>
          )}

          <Col
            span={
              props.queryCondition?.length == 3 ||
                props.queryCondition?.length == 6 ||
                props.queryCondition?.length == 0
                ? 24
                : 8
            }
            style={{
              display: 'flex',
              justifyContent: 'flex-end',
              alignItems: 'center',
              paddingRight: '12px',
            }}
          >
            <Form.Item></Form.Item>
            <Button
              onClick={() => {
                form.resetFields();
                setQueryParams({});
                setState(0)
              }}
              style={{
                height: '32px',
                color: 'var(--inbiz-color-text)',
                borderRadius: 'var(--inbiz-border-radius-base)',
              }}
            >
              <TextWidget>ProcessMonitoring.reset</TextWidget>
            </Button>
            <Button
              type="primary"
              onClick={onQuery}
              style={{
                margin: '0 20px 0 20px',
                height: '32px',
                borderRadius: 'var(--inbiz-border-radius-base)',
              }}
            >
              <TextWidget>ProcessMonitoring.query</TextWidget>
            </Button>
            <a
              style={{
                fontSize: 14,
                margin: '0 12px 0 0',
              }}
              onClick={() => {
                setExpand(!expand);
                form.resetFields([
                  'processName',
                  'processGroupName',
                  // 'state',
                  'startTime',
                  'endTime',
                ]);
              }}
            >
              {expand ? (
                <TextWidget>ProcessMonitoring.open</TextWidget>
              ) : (
                <TextWidget>ProcessMonitoring.stow</TextWidget>
              )}
              {expand ? <DownOutlined /> : <UpOutlined />}
            </a>
          </Col>
        </Row>
      </Form>
    </>
  );
});

const HeaderForm = observer((props: any) => {
  const { setQueryParams } = props;
  return (
    <>
      {props.queryRegion && (
        <div className="header-form">
          <AdvancedSearchForm setQueryParams={setQueryParams} {...props} />
        </div>
      )}
    </>
  );
});

export default HeaderForm;
